<template>
  <div class="home-menu">
    
    <swiper :options="swiperOption">
      <swiper-slide v-for="(page,index) of pages" :key="index">
        <div class="icon" v-for="item in page" :key=item.id>
          <router-link tag="div" class="menu-img" :to="'/category/'+item.id">
            <!-- <img :src="item.url" alt=""> -->
            {{String(item.desc)[0]}}
          </router-link> 
          <span>{{item.desc}}</span>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
//import axios from 'axios'
  export default {
    name:'HomeMenu',
    props:{
      list:Array
    },
    data() {
      return {
        swiperOption:{
          autoplay:false
        },
        menuList:[],
      }
    },
    
    computed: {
      pages(){
        const pages=[]
        this.list.forEach((item,index)=>{
          const page=Math.floor(index/8)
          if (!pages[page]) {
            pages[page]=[]
          }
          pages[page].push(item)
        })
        return pages
      }
    },
  }/*   .icons>>>.swiper-container
    height:0
    padding-bottom 50% */
</script>

<style lang="scss" scoped>

  .home-menu{
        overflow :hidden
    //height:0
    //padding-bottom 50%
    //background :green
  }

    .icon{
      position :relative;
      overflow :hidden;
      height :0;
      float :left;
      width :25%;
      height :50%;
      padding-bottom :10%;
      //background :red;
      padding-top: 10px;
    }
      .menu-img{
        margin: 0 auto;
        background: #ccc;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        display: block;
        border-radius: 50%;
      }
      span{
        position :absolute;
        left :0;
        right:0;
        bottom :10px;
        height :.44rem;
        line-height :.44rem;
        display :block;
        text-align :center;
      }

</style>